import React from 'react';
import { observer } from 'mobx-react';
import Form from '../../../components/Form';
import Spin from '../../../components/spin';
import { idCardRule } from '../../../utils/rules';

const t = Form.t;

const BaseType = {
  name: t.String,
  idCardNo: t.refinement(t.String, value => idCardRule(value))
};
const options = {
  fields: {
    name: {
      label: '姓名',
      error: '必填项',
      placeholder: '请输入真实姓名',
      factory: Form.TextBox
    },
    idCardNo: {
      label: '身份证号',
      error: '必填项, ',
      placeholder: '请输入身份证号',
      factory: Form.TextBox
    }
  },
};

@observer
class MyForm extends React.Component {
  render() {
    const initialValue = {
      name: this.props.user.userInfo.name,
      idCardNo: this.props.user.userInfo.idCardNo,
    };
    return (
      <Spin visible={this.props.user.pending}>
        <Form
          {...this.props}
          initialValue={initialValue}
          formType={BaseType}
          options={options}
        />
      </Spin>
    );
  }
}

export default MyForm;
